extends archetypes/content-with-menu.pug
include mixins/nav.pug
include mixins/documentationjs/widget-category-showcase.pug

block head
  script(src="https://cdn.jsdelivr.net/npm/instantsearch.js@2")

block navigation
  - let headings2 = headings || []
  - const customHeadings = [{tag: 'h2', id: 'basic', text: 'Most common widgets'}, {tag: 'h2', id: 'navigation', text: 'Navigational widgets'}, {tag: 'h2', id: 'filter', text: 'Filtering widgets'}, {tag: 'h2', id: 'clear-filter', text: 'Clearing widgets'}, {tag: 'h2', id: 'sort', text: 'Sorting widgets'}, {tag: 'h2', id: 'metadata', text: 'Metadata widgets'}, {tag: 'h2', id: 'analytics', text: 'Analytics widgets'}]
  +nav(navPath, navigation, mainTitle || title, headings2.concat(customHeadings))

block content
  .content!=contents

  script
    | window.instantsearch = instantsearch;
    | window.search = instantsearch({
    |   appId: "latency",
    |   apiKey: "6be0576ff61c053d5f9a3225e2a90f76",
    |   indexName: "instant_search",
    |   urlSync: false,
    |   searchParameters: {
    |     hitsPerPage: 3
    |   }
    | });

  +widgetCategoryShowCase('basic', widgetSymbols, 'Most common widgets')
  +widgetCategoryShowCase('navigation', widgetSymbols, 'Navigational widgets')
  +widgetCategoryShowCase('filter', widgetSymbols, 'Filtering widgets')
  +widgetCategoryShowCase('clear-filter', widgetSymbols, 'Clearing widgets')
  +widgetCategoryShowCase('sort', widgetSymbols, 'Sorting widgets')
  +widgetCategoryShowCase('metadata', widgetSymbols, 'Metadata widgets')
  +widgetCategoryShowCase('analytics', widgetSymbols, 'Analytics widgets')
  +widgetCategoryShowCase('other', widgetSymbols, 'Other widgets')

  script
    | window.search.once('render', function() { window.updateBoundaries(); });
    | window.search.start();
